<template>
    <QrcodeStream ref="qrcode" @detect="onDetect" :torch="torchActive" :paused="paused" :camera="camera">
      <div tyle="position: relative;">
        <div class="qr-scanner">
          <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
          </div>
        </div>
      </div>
<!--      暂不支持-->
<!--      <nut-button @click="ClickFlash">打开手电筒</nut-button>-->
      <div>
        <nut-button class="back" size="large" shape="square" @click="onBack">返回</nut-button>
      </div>
    </QrcodeStream>
</template>

<script lang="ts" setup>
import {defineEmits, defineProps, ref, watch} from "vue";
import {QrcodeStream} from "vue-qrcode-reader";
import request from "@/utils/request";
import API from "@/api/socket";

  interface Props {
    isShow: boolean
  }
  const props = defineProps<Props>()
  const emits = defineEmits(['update:isShow','back'])
  const paused = ref(false)
  const torchActive = ref(false)

  const camera = ref("front")
  watch(()=> props.isShow, ()=> {
    camera.value = props.isShow ? 'front' : 'off'
  })

  const ClickFlash = () => {
    console.log('打开手电筒')
    torchActive.value = true
  }

/**
   * 扫码方法
   * @param detectedCodes
   */
  const onDetect = async (detectedCodes: any[]) => {
    const target = detectedCodes[0];
    try {
      if (target && target.rawValue) {
        paused.value = true;
        // 扫描同样的二维码 会有缓存 paused 改变会清除缓存 重新扫描
        setTimeout( ()=> paused.value = false,
        200)
        await request({
          url: API.getOrders,
          method: 'post',
          data: {
            rawValue: target.rawValue
          }
        }).then((res: any) => {
          if (res.code === 200) {
            onBack(res.data)
          }
        })
      }
    } catch (e) {
      console.log("扫描报错",e)
    }
  };
  const onBack = (data: any) => emits('back',data);
</script>
<style scoped>
.qr-scanner {
  background-image:
      linear-gradient(0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent),
      linear-gradient(90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent);
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  position: relative;
  background-color: #1110;

  /* background-color: #111; */
}

.qr-scanner .box {
  width: 213px;
  height: 213px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
  background-color: #1110;
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite alternate;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
<style lang="scss" scoped>
:deep(.back.nut-button) {
  width: 100% !important;
}
</style>


